<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model="activeKey">
        <a-tab-pane key="0">
          <span slot="tab">
            <a-icon type="area-chart" />
            总览
          </span>
          <overview ref="overview" v-if="activeKey === '0'" @changeActiveKey="(v) => { activeKey = v }" />
        </a-tab-pane>

        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="database" />
            服务器管理
          </span>
          <server ref="server" v-if="activeKey === '1'" />
        </a-tab-pane>

        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="laptop" />
            虚拟机管理
          </span>
          <node ref="instance" v-if="activeKey === '2'" />
        </a-tab-pane>

        <a-tab-pane key="3">
          <span slot="tab">
            <a-icon type="cloud-server" />
            容器集群管理
          </span>
          <cluster ref="cluster" v-if="activeKey === '3'" />
        </a-tab-pane>

        <a-tab-pane key="4">
          <span slot="tab">
            <a-icon type="global" />
            应用管理
          </span>
          <app modelType="deployment" ref="deployment" v-if="activeKey === '4'" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import Overview from './Overview'
  import Server from './Server'
  import Node from './Node'
  import App from './App'
  import Cluster from './Cluster'


  export default {
    name: 'F010107',
    components: {
      Overview,
      Server,
      Node,
      App,
      Cluster
    },
    data() {
      return {
        activeKey: "0",
      }
    },
    created() {},
    methods: {
      handleTabChange() {
        let key = this.activeKey;
        if (key === '0' && this.$refs.overview) {
          this.$refs.overview.loadDatacenterList();
        } else if (key === '1' && this.$refs.server) {
          this.$refs.server.loadData();
        } else if (key === '2' && this.$refs.instance) {
          this.$refs.instance.loadData();
        } else if (key === '3' && this.$refs.cluster) {
          this.$refs.cluster.loadData();
        } else if (key === '4' && this.$refs.deployment) {
          this.$refs.deployment.loadData();
        }
      },
    },
  }
</script>